<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <a-popover placement="right" v-model="visible">
        <div style="background: #1677ff; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 25px">
          <PlusOutlined style="color: #fff"
        /></div>

        <template #content>
          <a-row>
            <a-col :span="24" class="node-title">人工节点</a-col>
            <a-col :span="24">
              <a-row :gutter="10">
                <a-col :span="12">
                  <div @click="addType(1)" class="node-item">
                    <img src="@/assets/images/flowable/node_01.png" width="32" height="32" />
                    审批人
                  </div>
                </a-col>
                <a-col :span="12">
                  <div @click="addType(2)" class="node-item">
                    <img src="@/assets/images/flowable/node_03.png" width="32" height="32" />
                    抄送人
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" class="node-title">条件节点</a-col>
            <a-col :span="24">
              <a-row :gutter="10">
                <a-col :span="12">
                  <div @click="addType(3)" class="node-item">
                    <img src="@/assets/images/flowable/node_02.png" width="32" height="32" />
                    并行审批
                  </div>
                </a-col>
                <a-col :span="12">
                  <div @click="addType(4)" class="node-item">
                    <img src="@/assets/images/flowable/node_04.png" width="32" height="32" />
                    条件分支
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <div @click="addType(5)" class="node-item" style="margin-top: 0">
                    <img src="@/assets/images/flowable/node_05.png" width="32" height="32" />
                    动态条件
                  </div>
                </a-col>
                <a-col :span="12">
                  <div @click="addType(6)" class="node-item" style="margin-top: 0">
                    <img src="@/assets/images/flowable/node_06.png" width="32" height="32" />
                    条件并行
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </template>
      </a-popover>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { NodeUtils } from '@/utils/nodeUtils';
  import { PlusOutlined } from '@ant-design/icons-vue';
  let props = defineProps({
    childNodeP: {
      type: Object,
      default: () => null,
    },
  });
  let emits = defineEmits(['update:childNodeP']);
  let visible = ref(false);
  /**创建审批人节点 */
  const createApproveNode = (childNode) => {
    return NodeUtils.createApproveNode(childNode);
  };
  /**创建抄送人节点 */
  const createCopyNode = (childNode) => {
    return NodeUtils.createCopyNode(childNode);
  };
  /**创建并行审批人节点 */
  const createParallelWayNode = (childNode) => {
    return NodeUtils.createParallelWayNode(childNode);
  };
  /**创建条件网关节点 */
  const createGatewayNode = (childNode) => {
    return NodeUtils.createGatewayNode(childNode);
  };
  /**创建动态网关节点 */
  const createDynamicConditionWayNode = (childNode) => {
    return NodeUtils.createDynamicConditionWayNode(childNode);
  };
  /**创建并行网关节点 */
  const createParallelConditionWayNode = (childNode) => {
    return NodeUtils.createParallelConditionWayNode(childNode);
  };
  // 创建节点 Map集合
  const createNodeMap = new Map([
    [1, createApproveNode],
    [2, createCopyNode],
    [3, createParallelWayNode],
    [4, createGatewayNode],
    [5, createDynamicConditionWayNode],
    [6, createParallelConditionWayNode],
  ]);
  const addType = (type) => {
    visible.value = false;
    const handleCreateNodeFunc = createNodeMap.get(type);
    const newNodeInfo = handleCreateNodeFunc(props.childNodeP);
    emits('update:childNodeP', newNodeInfo);
  };
</script>
<style lang="css" scoped>
  .add-node-btn-box {
    width: 240px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      margin: auto;
      width: 2px;
      height: 100%;
      background-color: #cacaca;
    }

    .add-node-btn {
      user-select: none;
      width: 240px;
      padding: 20px 0 32px;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      flex-shrink: 0;
      -webkit-box-flex: 1;
      flex-grow: 1;
    }
  }
  .node-title {
    /* padding: 10px 0; */
    color: #cacaca;
  }
  .node-item {
    margin: 20px 0;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    img {
      margin-right: 5px;
    }
  }
  .node-item:hover {
    border: 1px solid #ecedef;
    background: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(17, 31, 44, 0.08);
  }
</style>
